<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/page.css"/>
</head>
<body>
<div class="addBrand-container" id="food-add-app">
    <div class="container">

        <!--
            el-upload: 这是elementui的文件上传的标签
                class: 设置样式
                action: 图片提交到什么地方， controller方法的映射地址
                show-file-list ： 是否显示文件列表
                on-success ： 上传成功之后，执行什么方法
                before-upload ： 上传之前，执行什么方法
                ref : 一个标记，方便后面找到这个el-upload标签

                el-upload标签中的两行代码意思是：
                    第一行 <img> ： 用来显示图片，当我们上传成功了之后，后台要返回图片地址，然后设置到imageUrl里面去，就把图片显示到img标签里面
                    第二行 <i> : 当图片还没有上传成功imageUrl 还没有值的时候，就会显示一个默认的 方框出来。

        -->
        <el-upload class="avatar-uploader"
                   action="/common/upload"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeUpload"
                   ref="upload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar"></img>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/index.js"></script>
<script>
    new Vue({
        el: '#food-add-app',
        data() {
            return {
                imageUrl: ''
            }
        },
        methods: {

            //上传图片成功之后会执行的方法，要求后台处理图片上传的controller方法，必须要把图片的名字返回回来。以便
            // 这里拿着图片的名字去请求这张图片下来显示
            // reponse 就是后台返回回来的数据
            // file 就是上传的这张图片信息
            // fileList: 上传过的所有成功的图片信息
            handleAvatarSuccess(response, file, fileList) {

                this.imageUrl = `/common/download?name=${response.msg}`
            },

            //上传图片之前执行校验。 突变不能超过2M，必须是，指定的格式类型
            beforeUpload(file) {
                if (file) {
                    const suffix = file.name.split('.')[1]
                    const size = file.size / 1024 / 1024 < 2
                    if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
                        this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                        this.$refs.upload.clearFiles()
                        return false
                    }
                    if (!size) {
                        this.$message.error('上传文件大小不能超过 2MB!')
                        return false
                    }
                    return file
                }
            }
        }
    })
</script>
</body>
</html>